<template>
 <div class="cardNumber">
   <div class="header">
     <ImportFile :on-success="(obj) => success(obj,'total')" title="总数据表"></ImportFile>
     <ImportFile style="margin-left: 20px" :on-success="(obj) => success(obj,'filter')" title="筛选表"></ImportFile>
     <el-button style="margin-left: 20px" @click="exportData" size="small">导出</el-button>
     <div class="tableTip">
       <div>
         <p style="color: red">总数据表：{{totalTableConfig.name}}</p>
         <p>总条数: {{totalTableConfig.list.length}}</p>
       </div>
       <div>
         <p style="color: red">&nbsp;&nbsp;&nbsp;筛选表：{{filterTableConfig.name}}</p>
         <p>总条数: {{filterTableConfig.list.length}}</p>
       </div>
     </div>
     <div class="tip">
       <p>需要导入2个表格：总数据表,筛选表;(从总表中筛选提取相同姓名字段的数据) </p>
       <p>总数据表中必须包含字段：姓名, 卡号, 开户银行</p>
       <p>筛选表中必须包含字段：姓名</p>
     </div>
   </div>

   <el-table :data="tableList" stripe height="calc(100vh - 100px)" size="small">
     <el-table-column type="index" label="序号" width="180" />
     <el-table-column prop="name" label="姓名"  />
     <el-table-column prop="cardNo" label="卡号"/>
     <el-table-column prop="bank" label="开户银行" />
     <el-table-column label="操作" align="center" fixed="right">
       <template #default="scope">
         <el-button size="small" type="warning" @click="editTable(scope.row, scope.$index)" >编辑</el-button>
       </template>
     </el-table-column>
   </el-table>
   <div class="totalClass">共{{tableList.length}}条</div>
   <el-dialog v-model="editConfig.dialogFormVisible" title="修改人员信息">
     <el-form :model="editConfig" label-width="120px">
       <el-form-item label="姓名" >
         <el-input v-model.trim="editConfig.name" autocomplete="off" />
       </el-form-item>
       <el-form-item label="卡号" >
         <el-input v-model.trim="editConfig.cardNo" autocomplete="off" />
       </el-form-item>
       <el-form-item label="开户银行">
         <el-input v-model.trim="editConfig.bank" autocomplete="off" />
       </el-form-item>
     </el-form>
     <template #footer>
      <span class="dialog-footer">
        <el-button @click="editConfig.dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editSubmit">
          保存
        </el-button>
      </span>
     </template>
   </el-dialog>
 </div>
</template>

<script setup>
import ImportFile from '@/components/import.vue'
import {reactive, ref} from "vue";
import { ElMessage } from 'element-plus'
// 总表格
const totalTableConfig = reactive({
  list:[],
  name:''
})
// 筛选表格
const filterTableConfig = reactive({
  list:[],
  name:''
})
const tableList = ref([])

// 编辑
const editConfig = reactive({
  dialogFormVisible: false,
  name:'',
  cardNo:'',
  bank: '',
  editIndex:''
})
const editTable = (row, index) => {
  editConfig.editIndex = index
  editConfig.name = row.name
  editConfig.cardNo = row.cardNo
  editConfig.bank = row.bank
  editConfig.dialogFormVisible = true
}
const editSubmit = () => {
  tableList.value[editConfig.editIndex].name = editConfig.name
  tableList.value[editConfig.editIndex].cardNo = editConfig.cardNo
  tableList.value[editConfig.editIndex].bank = editConfig.bank
  editConfig.dialogFormVisible = false
  ElMessage.success('修改成功!')
}
// 导入成功
const success = ({header, result, fileName}, type) => {
  const tableInfo = {
    '姓名': 'name',
    '卡号': 'cardNo',
    '开户银行': 'bank'
  }
  let newArr = result.map(item => {
    let personnelInfo = {}
    Object.keys(item).forEach(key => {
      if (tableInfo[key] === 'timeOfEntry' || tableInfo[key] === 'correctionTime') {
        // 后端接口 限制了 不能是字符串 要求转化时间类型
        personnelInfo[tableInfo[key]] = new Date(formatDate(item[key], '/')) // 只有这样 才能存入数据库
      } else {
        personnelInfo[tableInfo[key]] = item[key] // 将原来中文对应的值 赋值给原来英文对应的值
      }
    })
    return personnelInfo
  })
  switch (type) {
    case 'total':
      totalTableConfig.list = newArr
      totalTableConfig.name = fileName
      break
    case 'filter':
      filterTableConfig.list = newArr;
      filterTableConfig.name = fileName
    break
  }
  // 筛选出来的结果表
  if(totalTableConfig.list.length && filterTableConfig.list.length){
    // 匹配到的结果
    let newList = []
    filterTableConfig.list.forEach(f => {
       totalTableConfig.list.forEach(t => {
        if(f.name === t.name){
          newList.push(t)
        }
      })
    })
    // 没有匹配到
    let noFilterList = []
    filterTableConfig.list.forEach(f => {
      let flag = newList.some(n => n.name == f.name)
      if(!flag){
        noFilterList.push(f)
      }
    })
    tableList.value = [...newList,...noFilterList ]
  }
  ElMessage.success('导入成功!')
}

// 导出
const exportData = () => {
  const headers = {
    '姓名': "name",
    "卡号": 'cardNo',
    '开户银行': 'bank'
  }
  import('@/vendor/Export2Excel').then(async excel => {
    const data = formatJson(headers, tableList.value)
    excel.export_json_to_excel({
      header: Object.keys(headers),
      data
    })
    ElMessage.success('导出成功!')
  })
}
// 将表头数据和数据进行对应
const formatJson = (headers, rows) => {
  return rows.map(item => {
    return Object.keys(headers).map(key => {
      return item[headers[key]]
    })
  })
}
</script>

<style scoped lang='scss'>
.cardNumber{
  .header{
    display: flex;
    align-items: center;
    height: 64px;
    .tip{
      font-size: 12px;
      margin-left: 20px;
      color: #da9519;
      p{
        margin: 0;
        padding: 0;
      }
    }
  }
  .tableTip{
    font-size: 12px;
    margin-left: 20px;
    &>div{
      display: flex;
      p{
        margin: 2px;
      }
      & p:first-child{
        margin-right: 20px;
      }
    }
  }
  .totalClass{
    font-size: 12px;
    margin-top: 10px;
  }
}
</style>
